<template>
  <div class="inside-page">
    <div class="choice-wrap">
      <div class="choice-wrap-container">
        <div class="wrap-left">
          <img src="" />
        </div>
        <div class="wrap-right">
          <p class="wrap-name">
            <span class="name">{{ info.jobName }}</span>
            <span class="corner">线下专场</span>
          </p>
          <p class="pro">主办单位：大学学生就业指导与服务中心</p>
          <div class="wrap">
            <p class="address">
              <i class="iconfont icon-map"></i>
              <span>地址：四川大学望江校区基教楼201</span>
            </p>
            <p class="money">
              <i class="iconfont icon-money"></i>
              <span>报名费用: ¥2000</span>
            </p>
          </div>
          <div class="time">
            <p>
              <span>双选会时间：{{ info.startTime }} - {{ info.endTime }}</span>
              <span>报名截止：2021年4月30日</span>
            </p>
          </div>
        </div>
        <div class="company-data">
          <div class="data">
            <p class="num">142</p>
            <p class="text">参会单位</p>
          </div>
          <div class="data">
            <p class="num">12015</p>
            <p class="text">提供岗位</p>
          </div>
          <div class="data">
            <p class="num">4342</p>
            <p class="text">点击量</p>
          </div>
          <div class="submit">
            <button
              v-if="subState === 1"
              class="confirm"
              type="button"
              @click="submit"
            >
              加入双选会
            </button>
            <button
              v-if="subState === 2"
              class="confirm"
              type="button"
              @click="submit"
            >
              立即报名
            </button>
            <div class="disabled" v-else-if="subState === 3">已报名</div>
          </div>
        </div>
      </div>
    </div>
    <div class="choice-detail content">
      <p class="detail-title">双选会简介</p>
      <div class="intro"></div>
      <div class="text-wrap">
        <p>尊敬的用人单位：</p>
        <p>
          我校2022届毕业生15000余人，涵盖12大学科门类。为促进用人单位做好进校招聘活动，给单位与毕业生双向选择创造便利条件，学校拟举办“就业促进周——武汉大学2021届未就业毕业生暨2022届实习生空中双选会”。本次双选会为公益活动，不对用人单位收取任何费用，诚邀您参会选聘人才！
        </p>
        <p>一、举办单位</p>
        <p>主办单位：武汉大学学生就业指导与服务中心</p>
        <p>承办单位：伯乐校招</p>
        <p>二、会议时间</p>
        <p>报名时间：2021年5月19日8:00--5月26日18:00</p>
        <p>会议时间：2021年5月27日8:00--5月28日18:00</p>
        <p>三、参会对象</p>
        <p>
          1.参会单位：对2021届本、硕、博应届毕业生及2022届实习生具有招聘需求的全国各地区人社厅/
          局、国企单位、事业单位、高等院校、医院、科研院所及知名企业等。
        </p>
        <p>2.参会学生：2021届本科、硕士、博士应届毕业生及2022届实习生。</p>
        <p>四、参会方式</p>
        <p>1.报名链接（PC端）：</p>
        <p>
          http://bolexiaozhao.com/index.php/Home/Meet/meetonlineinfo/id/182.html
        </p>
        <p>或可直接关注伯乐校招微信公众号和小程序，进入双选会版块进行报名。</p>
        <p>2.参会流程</p>
        <p>1）用人单位</p>
        <p>
          点击报名网址（PC端）或访问伯乐校招网，进行账号登录。如无伯乐校招网账号，需先进行【注册】。注册步骤：在报名页面点击【注册】，使用手机号验证信息，进入企业注册页面，填写完整信息并保存后，等待审核（审核时间为1-2个工作日）。
        </p>
        <p>
          企业资质审核通过后，发布所需招聘的职位，上传宣传视频（非必选）。审核通过后点击报名页面的【立即报名】，即可完成报名。
        </p>
        <p>2）参会学生</p>
        <p>
          点击报名网址或访问伯乐校招网，进行账号登录。如无伯乐校招网账号，需先进行【注册】。注册步骤：在报名页面点击【注册】，使用手机号验证信息，进入学生注册页面，填写基本信息并上传个性化简历，完成注册。
        </p>
        <p>
          点击报名网址进入会场，查看本场双选会招聘单位及岗位，进行投递。简历投递后可在【个人中心】-【我的投递】中查看简历处理进度。
        </p>
        <p>3.会务咨询</p>
        <p>叶老师 027-68788915；17507130248（微信同号）</p>
        <p>王老师 027-68788916；18627989127（微信同号）</p>
        <p>五、特别说明</p>
        <p>
          1.为保障空中双选会运行秩序和应聘学生的合法权益，本次活动拒绝传销招聘、虚假招聘、委托招聘，参会单位不得以任何形式向求职毕业生收取任何费用，不得以任何非正常渠道和方式与毕业生沟通或干扰其正常学习生活。
        </p>
        <p>2.本次空中双选会谢绝任何人力资源服务及招聘代理机构报名。</p>
        <p>
          3.双选会报名申请通过之后，招聘岗位将自动呈现至双选会会场，用人单位可实时更新招聘需求，了解本单位简历投递情况。
        </p>
        <p>
          友情提示：为保证在线面试效果，请各用人单位及毕业生选择在PC端开展视频面试；
          推荐选择谷歌浏览器，请提前准备好电脑、耳机等相关设备，确保网络畅通。
        </p>
        <p>武汉大学学生就业指导与服务中心</p>
        <p>2021年5月18日</p>
      </div>
    </div>
  </div>
</template>

<script>

export default {
  asyncData: ({ req }) => ({
  }),
  components: {},
  data () {
    return {
      subState: 1,
      info: {
        jobName: '四川大学2021秋季双选会',
        money: '12-18k',
        address: '北京',
        jobType: '全职',
        edu: '本科及以上学历',
        startTime: '2021年4月30日 10:00',
        endTime: '2021年4月30日 16:00',
        time: '2021年4月30日',
        company: '同方股份有限公司',
        companyType: '互联网/游戏/软件',
        logo: '',
        active: true,
        apply: false,
      },
      intro: '',
    }
  },
  head () {
    return {
      titleTemplate: (titleChunk) => {
        return `${titleChunk} - 大学生找工作、找实习`;
      }
    }
  },
  created () {
    this.id = this.$route.query.id;
  },
  mounted () {
  },
  watch: {

  },
  computed: {

  },
  methods: {
    jumpTo (obj) {
      this.$router.push({
        path: '/company/detail',
        query: { id: obj.id }
      })
    },
    submit () {
      if (this.subState === 1) {
        this.subState = 2
      } else if (this.subState === 2) {
        this.$router.push({
          path: '/order/create',
          query: {
            id: '123'
          }
        })
      };
    },
  },
}
</script>

<style lang="scss" scoped>
.inside-page {
  width: 100%;
  position: relative;
  .choice-wrap {
    width: 100%;
    height: 220px;
    padding-top: 40px;
    background: #f6f7f8;
    position: relative;
    .choice-wrap-container {
      width: $base-width;
      margin: 0 auto;
      position: relative;
      .wrap-left {
        float: left;
        margin-top: 5px;
        height: 140px;
        width: 140px;
        overflow: hidden;
        background: #fff;
        border-radius: 8px;
        text-align: center;
        img {
          height: 140px;
        }
      }
      .wrap-right {
        float: left;
        margin-left: 20px;
        position: relative;
        .wrap-name {
          line-height: 40px;
          .name {
            font-size: 36px;
            color: #24292f;
          }
          .corner {
            vertical-align: top;
            display: inline-block;
            margin-left: 5px;
            width: 70px;
            height: 24px;
            line-height: 22px;
            font-size: 12px;
            text-align: center;
            border-radius: 4px;
            background: rgba(252, 112, 62, 0.3);
            color: $base-color-important;
            border: 1px solid $base-color-important;
          }
        }
        .pro {
          margin: 10px 0;
          font-size: 14px;
          color: #999;
        }
        .wrap {
          p {
            margin-right: 30px;
            display: inline-block;
            line-height: 20px;
            vertical-align: middle;
            i {
              color: $base-color;
              font-size: 16px;
              vertical-align: middle;
            }
            span {
              vertical-align: middle;
              font-size: 14px;
              color: #666;
            }
          }
          .money {
            i,
            span {
              color: $base-color-danger;
              font-size: 14px;
              line-height: 20px;
            }
            i {
              font-size: 16px;
            }
          }
        }
        .time {
          padding-left: 15px;
          margin-top: 10px;
          position: relative;
          height: 20px;
          line-height: 20px;
          i,
          span {
            margin-right: 10px;
            font-size: 14px;
            color: #666;
          }
          &::before {
            content: '';
            height: 14px;
            width: 2px;
            background: $base-color;
            position: absolute;
            left: 2px;
            top: 3px;
          }
        }
      }
      .company-data {
        position: absolute;
        right: 0;
        top: 20px;
        .data {
          float: left;
          text-align: center;
          padding-left: 30px;
          &:first-child {
            padding-left: 0;
          }
          .num {
            font-size: 36px;
            color: $base-color;
          }
          .text {
            font-size: 14px;
            color: #999;
          }
        }
        .submit {
          margin-top: 80px;
          button {
            width: 190px;
          }
          .disabled {
            display: inline-block;
            height: 45px;
            line-height: 43px;
            margin: 0 20px;
            border: 1px solid #ccc;
            border-radius: 6px;
            font-size: 16px;
            background: #ccc;
            color: #f1f1f1;
            cursor: not-allowed;
          }
        }
      }
    }
  }

  .choice-detail {
    position: relative;
    .intro {
      height: 280px;
      background: #ebebeb;
    }
    .text-wrap {
      margin: 20px 0 80px 0;
      p {
        margin-bottom: 10px;
        color: #666;
        line-height: 32px;
      }
    }
  }
}
</style>
